<template>
  <div class="img-preview" v-if="previewList && previewList.length">
    <el-image
      v-for="(url, idx) in previewList"
      :key="idx"
      :src="url"
      :preview-src-list="previewList"
      :style="thumbStyle"
      fit="cover"
    />
  </div>
  <div v-else class="img-empty">暂无图片</div>
</template>

<script>
export default {
  name: 'ImagePreview',
  props: {
    images: { type: Array, default: () => [] }, // [{url}] or strings
    urls:   { type: Array, default: null },     // string URLs array
    size:   { type: Number, default: 100 }      // thumbnail size
  },
  computed: {
    previewList() {
      const raw = Array.isArray(this.urls) && this.urls.length ? this.urls : this.images
      const list = (raw || []).map(item => {
        const u = typeof item === 'string' ? item : (item && (item.url || item.path || item.src))
        return this.makeAbsUrl(u)
      }).filter(Boolean)
      return list
    },
    thumbStyle() {
      const s = `${this.size}px`
      return { width: s, height: s, marginRight: '10px', marginBottom: '10px', borderRadius: '4px', overflow: 'hidden' }
    }
  },
  methods: {
    makeAbsUrl(u) {
      if (!u) return ''
      if (/^https?:\/\//i.test(u)) return u
      const base = (process.env && process.env.VUE_APP_BASE_API) || ''
      if (u.startsWith('/')) return base + u
      return base + '/' + u
    }
  }
}
</script>

<style scoped>
.img-preview{ display:flex; flex-wrap: wrap; }
.img-empty{ color:#909399; }
</style>


